<template>
	<view class="order-data-info">
		<view class="order-data-info-1">
			<image src="https://master.shengejiaju.cn/web/static/icons/ico_addr@2x.png" mode="widthFix"></image>
			<view class="order-data-info-1-info">
				<view><text>收货人：{{orderInfo.address_id.consignee}}</text><text>{{orderInfo.address_id.mobile}}</text></view>
				<view>
					收货地址：
					<block v-if="orderInfo.address_id.province">{{orderInfo.address_id.province}}</block>
					<block v-if="orderInfo.address_id.city">{{orderInfo.address_id.city}}</block>
					<block v-if="orderInfo.address_id.district">{{orderInfo.address_id.district}}</block>
					{{orderInfo.address_id.address}}
				</view>
			</view>
		</view>
		<view class="order-data-info-2">
			<view class="order-data-info-2-item">
				<view class="order-data-info-tit">用户信息</view>
				<view class="userInfo">
					<image :src="orderInfo.user_list.heard_img"></image>
					<view class="userInfo-box">
						<view>{{orderInfo.user_list.nickname}}</view>
						<view class="ID">ID:{{orderInfo.user_list.user_id}}</view>
					</view>
					<view class="phone" @click="phoneCall(orderInfo.user_list.phone)">联系TA</view>
				</view>
			</view>
			<view class="order-data-info-2-item">
				<view class="order-data-info-tit">推荐人信息</view>
				<view class="userInfo">
					<image :src="orderInfo.belong_refer_list.heard_img"></image>
					<view class="userInfo-box">
						<view class="name">{{orderInfo.belong_refer_list.nickname}}</view>
						<view class="ID">ID:{{orderInfo.belong_refer_list.user_id}}</view>
					</view>
					<view class="phone" @click="phoneCall(orderInfo.belong_refer_list.phone)">联系TA</view>
				</view>
			</view>
		</view>
		<view class="order-data-info-3">
			<view class="order-data-info-tit">订单信息 <text>{{orderInfo.status_name}}</text></view>
			<view class="order-goods-list">
				<view class="order-goods-item" v-for="(data,index) in orderInfo.goods_list" :key="index">
					<block v-if="!data.have_group">
						<image :src="data.sku_info.img" mode="aspectFill"></image>
						<view class="order-goods-item-info">
							<view>{{data.goods_name}}</view>
							<text>
								<block v-if="data.sku_info.size">{{data.sku_info.size}}</block>
								<block v-if="data.sku_info.color">{{data.sku_info.color}}</block>
								<block v-if="data.sku_info.lining">{{data.sku_info.lining}}</block>
							</text>
						</view>
						<view class="order-goods-item-num">x {{data.goods_number}}</view>
					</block>
					<block v-else>
						<image :src="data.image_thumb" mode="aspectFill"></image>
						<view class="order-goods-item-info">
							<view>{{data.goods_name}}</view>
						</view>
						<view class="order-goods-item-num">x {{data.goods_number}}</view>
					</block>
				</view>
			</view>
			<view class="order-data-info-cell gary">
				<view><text>物流订单</text><text>{{orderInfo.express_sn}}</text></view>
				<view><text>运费</text><text>{{orderInfo.type==2?'到付':'包邮'}}</text></view>
			</view>
			<view class="order-data-info-cell">
				<view><text>订单总价</text><text class="orange">¥<text>{{Number(orderInfo.order_amount) + Number(orderInfo.coupon_price)}}</text></text></view>
				<view><text>实付款</text><text class="orange">¥<text>{{orderInfo.order_amount}}</text></text></view>
			</view>
		</view>
		<view class="order-data-info-4">
			<view class="copy" @click="copy(orderInfo.order_sn)">复制</view>
			<view>订单编号：{{orderInfo.order_sn}}</view>
			<view>下单时间：{{orderInfo.add_time}}</view>
			<view>支付方式：{{orderInfo.pay_id==1?'微信支付':'支付宝支付'}}</view>
			<view v-if="orderInfo.brief">订单备注：{{orderInfo.brief}}</view>
		</view>
	</view>
</template>

<script>
	import { handleClipboard } from '../../static/utils/copy.js' 
	export default {
		data() {
			return {
				orderInfo: {
					address_id: {},
					user_list: {},
					belong_refer_list: {}
				}
			};
		},
		onLoad(options) {
			this.init(options.id)
		},
		methods: {
			init(id){
				this.$api.StockOrderInfo({order_id: id}).then(res => {
					this.orderInfo = res.datas
				})
			},
			phoneCall(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			// 复制
			copy(e){
				// #ifdef H5
				handleClipboard(e, event, () => {
					uni.showToast({
						icon: 'none',
						title: '复制成功',
						duration: 1500
					})
				}, () => {
					uni.showToast({
						icon: 'none',
						title: '复制失败'
					})
				})
				return false
				// #endif
				uni.setClipboardData({
					data: e,
					success: function () {
						 uni.showToast({
							icon: 'none',
							title: '复制成功',
							duration: 1500
						 })
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.order-data-info{
		padding: 20rpx 0;
		.order-data-info-tit{
			font-size: 32rpx;
			display: flex;
			align-items: center;
			text.status{
				
			}
			&::before{
				content: '';
				width: 6rpx;
				height: 26rpx;
				border-radius: 6rpx;
				background-color: #999;
				display: inline-block;
				vertical-align: middle;
				margin: 0 15rpx 0 0;
			}
		}
		.order-data-info-1{
			background-color: #FFF;
			display: flex;
			align-items: center;
			padding: 30rpx 20rpx;
			image{
				width: 35rpx;
			}
			.order-data-info-1-info{
				flex: 1;
				min-width: 0;
				margin-left: 20rpx;
				view{
					font-size: 28rpx;
					color: #656565;
					display: flex;
					justify-content: space-between;
					line-height: 48rpx;
					&:first-child{
						margin-bottom: 10rpx;
					}
				}
			}
		}
		.order-data-info-2{
			background-color: #FFF;
			margin-top: 20rpx;
			padding: 20rpx;
			.order-data-info-2-item{
				border-bottom: solid 1px #EEE;
				margin-bottom: 20rpx;
				&:last-child{
					border-bottom: none;
					margin-bottom: 0;
					.userInfo{
						padding-bottom: 0;
					}
				}
				.userInfo{
					display: flex;
					padding: 30rpx 0;
					align-items: center;
					image{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: #EEE;
					}
					.userInfo-box{
						flex: 1;
						margin-left: 25rpx;
						.name{
							font-size: 30rpx;
							margin-bottom: 10rpx;
						}
						.ID{
							font-size: 24rpx;
							color: #999;
						}
					}
					.phone{
						width: 125rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						border-radius: 25rpx;
						border: solid 1px #656565;
						color: #656565;
						font-size: 24rpx;
					}
				}
			}
		}
		.order-data-info-3{
			background-color: #FFF;
			margin-top: 20rpx;
			padding: 20rpx;
			.order-goods-list{
				.order-goods-item{
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: solid 1px #EEE;
					&:last-child{
						border-bottom: none;
					}
					image{
						width: 180rpx;
						height: 180rpx;
						background-color: #EEE;
					}
					.order-goods-item-info{
						flex: 1;
						min-width: 0;
						margin: 0 20rpx;
						view{
							font-size: 32rpx;
							height: 92rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						text{
							font-size: 26rpx;
							color: #999;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					.order-goods-item-num{
						font-size: 26rpx;
					}
				}
			}
			.order-data-info-cell{
				view{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;
					line-height: 48rpx;
					text{
						font-size: 28rpx;
						&.orange{
							font-size: 20rpx;
							color: #FD9B26;
							text{
								font-size: 36rpx;
							}
						}
					}
				}
				&.gary{
					border-bottom: solid 1px #EEE;
					padding-bottom: 10rpx;
					margin-bottom: 10rpx;
					view{
						margin-top: 0;
						text{
							color: #999;
							font-size: 26rpx;
							margin-bottom: 10rpx;
						}
					}
				}
			}
		}
		.order-data-info-4{
			background-color: #FFF;
			margin-top: 20rpx;
			padding: 20rpx;
			position: relative;
			.copy{
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				border: solid 1px #2073F5;
				border-radius: 10rpx;
				height: 48rpx;
				line-height: 46rpx;
				width: 100rpx;
				text-align: center;
				font-size: 24rpx;
				color: #2073F5;
			}
			view{
				font-size: 26rpx;
				color: #666;
				line-height: 52rpx;
			}
		}
	}
</style>
